import React, { forwardRef, useImperativeHandle, useState } from 'react'
// 引入编辑器组件
import BraftEditor from 'braft-editor'
// 引入编辑器样式
import 'braft-editor/dist/index.css'
// import ColorPicker from 'braft-extensions/dist/color-picker' // 引入富文本高级取色器
import 'braft-extensions/dist/color-picker.css'
// import Table from 'braft-extensions/dist/table' // 引入富文本表格功能
import './index.css'


const EditorDemo = forwardRef((props: { callbackEditorItem?: (e: any) => void }, _ref) => {
  const { callbackEditorItem } = props;
  const [editorState, setEditorState] = useState(null);

  useImperativeHandle(_ref, () => {
    return { editorState, setEditorState }
  });

  const handleEditorChange = (e: any) => {
    setEditorState(BraftEditor.createEditorState(e));
    if (callbackEditorItem) { callbackEditorItem(e); }
  }

  return (
    <div className="my-component">
      <BraftEditor
        placeholder='请输入内容！'
        value={editorState}
        onChange={e => handleEditorChange(e)}
        // excludeControls={['media', 'emoji']} // 媒体，表情 不展示在编辑器里
        style={{
          border: 'solid 1px rgb(0,0,0,0.2)',
          height: '400px'
        }}
      />
    </div>
  )
})

export default EditorDemo;